<template>
	<view style="height: 100%;">
		<swiper class="swiper" circular :autoplay="true" :indicator-dots="true" :interval="2000" :duration="500">
			<swiper-item>
				<image style="width: 100%; height: 200px;" src="/static/weapp/swiper1.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width: 100%; height: 200px;" src="/static/weapp/swiper2.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width: 100%; height: 200px;" src="/static/weapp/swiper3.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="width: 100%; height: 200px;" src="/static/weapp/swiper4.jpg"></image>
			</swiper-item>
		</swiper>
		<view class="layout1">
			<view class="sidebar">
				<view v-for="item in categoryList" class="sidebar-item" :class="{active : index == item.id}" @click="chooseItem(item)">
					<image class="icon" :src="item.url"></image>
					<view class="label">{{item.name}}</view>
				</view>
			</view>
			<view class="content">
				<view v-for="(item, index) in goodsList">
					<view class="card">
						<image class="card-pic" :src="item.picUrl"></image>
						<view class="card-content">
							<view class="card-content-title">{{item.name}}</view>
							<view class="card-content-desc">{{item.desc}}</view>
							<view style="display: flex; flex-direction: row; margin-top: auto; margin-bottom: 5px;">
								<view class="card-content-price">¥ {{numFilter(item.price)}}</view>
								<image src="/static/weapp/ic_add.png" class="add" @click="addCart(item)"></image>
							</view>
						</view>
					</view>
					<view v-if="index != goodsList.length - 1" class="line"></view>
				</view>
				<view style="margin-bottom: 80px;"></view>
				
				<uni-badge class="cart" :text="goodsNum" absolute="rightTop" size="normal">
					<image class="cart-img" src="/static/weapp/ic_cart.png" @click="showCart"></image>
				</uni-badge>
			</view>
		</view>
		
		<view :class="['popup_content', showCartModal ? 'openActive': '']">
			<view class="cart-layout">
				<view style="margin-left: 20px;">购物车({{goodsNum}})</view>
				<view style="display: flex; flex-direction: row; margin-right: 5px; margin-left: auto;"
				    @click="clearCart">
					<image style="width: 20px; height: 20px;" src="/static/weapp/ic_delete.png"></image>
					<view style="margin-right: 20px;">清空购物车</view>
				</view>
			</view>
			<view class="line"></view>
			
			<view v-if="cartList.length == 0" style="text-align: center; color: gainsboro; font-size: 16px; margin-top: 20px;">
				空空如也
			</view>
			
			<view v-if="cartList.length > 0">
			    <view v-for="(item, index) in cartList">
					<view class="card">
						<image style="width: 80px; height: 80px; margin-left: 10px;" :src="item.picUrl"></image>
						<view class="cart-content">
							<view style="font-size: 14px; text-align: left; margin-top: 0;">{{item.name}}</view>
							<view style="font-size: 14px; text-align: left; margin-top: auto; margin-bottom: 0;">¥ {{numFilter(item.price)}}</view>
						</view>
						<view style="display: flex; margin-right: 20px; margin-left: 10px;">
							<image src="/static/weapp/ic_minus.png" class="cart-icon" @click="minusCount(item)"></image>
							<view class="cart-text">{{item.count}}</view>
							<image src="/static/weapp/ic_add.png" class="cart-icon" @click="addCount(item)"></image>
						</view>
					</view>
					<view v-if="index != cartList.length - 1" class="line"></view>
				</view>
			</view>
		</view>
		<view v-if="showCartModal" class="popup_overlay" @click="closeCart"></view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	import { shopList, getShopCount, clearShop } from '../cart/cart.js'
	
	export default {
		data() {
			return {
				index: 1,
				categoryList: [],
				goodsNum: 0,
				cartList: shopList,
				goodsList: [],
				showCartModal: false,
			}
		},
		methods: {
			async chooseItem(item) {
				this.index = item.id;
				var res = await this.getGoodsList(item.id);
				if (res.code == 200) {
					this.goodsList = res.data;
				}
			},
			
			getAllCategory() {
				return new Promise((resolve, reject) => {
					http.get('/goods/category').then(res => {
						resolve(res.data);
					})
				})
			},
			
			addCart(item) {
				this.goodsNum += 1;
				var exist = false;
				for (var index in this.cartList) {
					var cartItem = this.cartList[index];
					if (cartItem.id == item.id) {
						cartItem.count += 1;
						exist = true;
						break;
					}
				}
				if (!exist) {
					item.count = 1;
					this.cartList.push(item)
				}
			},
			
			numFilter (value) {
			    let realVal = parseFloat(value).toFixed(2)
			    return realVal
			},
			
			showCart() {
				this.showCartModal = !this.showCartModal;
			},
			
			closeCart() {
				this.showCartModal = false;
			},
			
			clearCart() {
				this.goodsNum = 0;
				this.cartList.splice(0);
			},
			
			addCount(item) {
				for (var index in this.cartList) {
					var cartItem = this.cartList[index];
					if (cartItem.id == item.id) {
						cartItem.count += 1;
						this.goodsNum += 1;
						break;
					}
				}
			},
			
			minusCount(item) {
				var deleteIndex = -1;
				for (var index in this.cartList) {
					var cartItem = this.cartList[index];
					if (cartItem.id == item.id) {
						cartItem.count -= 1;
						this.goodsNum -= 1;
						if (cartItem.count == 0) {
							deleteIndex = index;
						}
						break;
					}
				}
				if (deleteIndex >= 0) {
					this.cartList.splice(deleteIndex, 1);
				}
			},
			
			getGoodsList(categoryId) {
				return new Promise((resolve, reject) => {
					http.get('/goods/list?categoryId=' + categoryId).then(res => {
						resolve(res.data);
					})
				})
			},
			
		},
		
		async onShow() {
			var res = await this.getAllCategory();
			this.goodsNum = getShopCount();
			if (res.code == 200) {
				this.categoryList = res.data;
				for (var index in this.categoryList) {
					var item = this.categoryList[index];
					item.url = '/static/weapp/category_' + item.id + '.png';
				}
				if (this.categoryList.length > 0) {
					var categoryId = this.categoryList[this.index - 1].id;
					res = await this.getGoodsList(categoryId);
					if (res.code == 200) {
						this.goodsList = res.data;
					}
				}
			}
		},
	}
</script>

<style>
	.swiper {
		width: 100%;
		height: 30%;
	}
	.layout1 {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 70%;
		overflow-y: scroll;
	}
	.sidebar {
		display: flex;
		flex-direction: column;
		width: 20%;
		overflow-y: scroll;
	}
	.sidebar-item {
		display: flex;
		flex-direction: column;
		width: 100%;
		text-align: center;
		color: rgb(100, 100, 100);
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.active {
		color: black;
		background-color: white;
	}
	.icon {
		width: 30px;
		height: 30px;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
	}
	.label {
		justify-content: center;
		font-size: 12px;
	}
	.content {
		display: flex;
		flex-direction: column;
		width: 80%;
		text-align: center;
		background-color: white;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.card {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 10px 10px;
	}
	.card-pic {
		display: flex;
		width: 100px;
		height: 100px;
		margin: 10px 10px;
	}
	.card-content {
		display: flex;
		flex-direction: column;
		height: 100px;
		margin: 10px 10px;
		width: 50%;
	}
	.card-content-title {
		font-size: 14px;
		font-weight: bold;
		text-align: left;
	}
	.card-content-desc {
		font-size: 12px;
		text-align: left;
		margin-top: 5px;
	}
	.card-content-price {
		font-size: 16px;
		text-align: left;
		font-weight: bold;
	}
	.line {
		display: flex;
		margin-left: 10px;
		margin-right: 10px;
		height: 1px;
		background-color: gainsboro;
	}
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  background-color: transparent;
	}
	.add {
		display: flex;
		width: 24px;
		height: 24px;
		margin-left: auto;
		margin-right: 10px;
	}
	.cart {
		display: flex;
		position: absolute;
		bottom: 10px;
		right: 20px;
		z-index: 1003;
	}
	.cart-img {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		padding: 8px;
		box-shadow: rgb(200, 200, 200) 0px 0px 5px;
	}
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgb(200, 200, 200, 0.5);
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}
	.popup_content {
		display: flex;
		flex-direction: column;
		position: fixed;
		height: 250px;
		left: 0;
		right: 0;
		bottom: -260px;
		overflow-y: scroll;
		border: 5px solid white;
		background-color: white;
		z-index: 1002;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: all 0.25s linear;
	}
	.openActive {
		bottom: 0 !important;
	}
	.cart-layout {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-top: 5px;
		margin-bottom: 10px;
	}
	.cart-content {
		display: flex;
		flex-direction: column;
		margin: 10px 10px;
		width: 40%;
	}
	.cart-icon {
		display: flex;
		width: 24px;
		height: 24px;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: auto;
		margin-bottom: auto;
	}
	.cart-text {
		display: flex;
		font-size: 14px;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: auto;
		margin-bottom: auto;
	}
	
</style>